<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			background: red;
			display: none;
		}
	</style>
	<script>
		window.onload = function (argument) {
			p = document.getElementsByTagName('p');

			console.log(p);

			num = 60;

			for (var i = 0; i < p.length; i++) {

				p[i].style.width= num+'px';

				num1 = Math.floor(Math.random()*255);
				num2 = Math.floor(Math.random()*255);
				num3 = Math.floor(Math.random()*255);

				p[i].style.background= "rgb("+num1+","+num2+","+num3+")";

				num+=60;
			}

			index = 0;
			function run() {
				p[index].style.display="block";

				if(index==p.length-1){
					index = 0;
					for (var i = 0;i < p.length; i++) {
						p[i].style.display="none";
					}
				}else{
					index++;
				}
				
			}

			start = document.getElementById('start');
			stop = document.getElementById('stop');

			start.onclick= function () {
				time = setInterval(run,100);
			}

			stop.onclick= function () {
				clearInterval(time)
			}

			
		}

	</script>
</head>
<body>
	<input type="button" id="start" value="开始">
	<input type="button" id="stop" value="停止">
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
	<p>学并思</p>
</body>
</html>